<template>
  <views class="fastIssuing">
    <!-- 人员添加 -->
    <div class="add">
      <modelBox :show="add_customer_show">
        <div class="add_lists">
          <div class="flex flexR add_lists_title">
            <viewTitle :title="'人员查询'" :border="false"></viewTitle>
            <div class="el-icon-close cp" @click="close_Model"></div>
          </div>
          <div class="content">
            <el-form ref="form" label-width="auto" :inline="true">
              <div class="pay_time flex flexR center">
                <el-form-item label="创建时间:">
                  <el-date-picker
                    v-model="create_time"
                    type="datetimerange"
                    align="right"
                    :default-time="['0:00:00','23:59:59']"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                  ></el-date-picker>
                </el-form-item>
              </div>
            </el-form>
            <el-form ref="form" label-width="auto" :inline="true">
              <div class="flex flexR search_input">
                <div class="their_facilitator flex flexR center">
                  <el-form-item label="关键字:">
                    <el-input
                      v-model="keywords"
                      placeholder="请输入姓名/手机号/身份证号/银行卡号"
                      :clearable="true"
                      :style="{width:365+'px'}"
                    ></el-input>
                  </el-form-item>
                </div>
                <el-form-item>
                  <div class="flex flexR search_btn">
                    <el-button type="primary" @click="query">查询</el-button>
                    <el-button @click="reset">重置</el-button>
                  </div>
                </el-form-item>
              </div>
            </el-form>
          </div>
          <div class="table_list">
            <el-table
              ref="multipleTable"
              :data="tableDatas"
              tooltip-effect="dark"
              style="width: 100%"
              :highlight-current-row="true"
              :show-header="true"
              @selection-change="handleSelectionChange"
            >
              <el-table-column fixed type="selection" width="55"></el-table-column>
              <el-table-column prop="professional_sn" label="编号" width="150"></el-table-column>
              <el-table-column prop="name" label="姓名" width="120"></el-table-column>
              <el-table-column prop="cer_code" label="身份证号" width="180"></el-table-column>
              <el-table-column prop="bank_code" label="银行卡号" width="180"></el-table-column>
              <el-table-column prop="mobile" label="手机号码" show-overflow-tooltip></el-table-column>
              <el-table-column
                :formatter="(row)=>{return this.$moment(row.created_time * 1000).format('YYYY-MM-DD HH:MM:SS')}"
                label="创建时间"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column prop="is_auth" label="状态" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>{{scope.row.is_auth==1?'已认证':'未认证'}}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="flex flexR paging">
            <el-pagination
              style="background:#fff; padding:10px 0"
              background
              layout="total, sizes,prev, pager, next, jumper"
              @size-change="(page_size) => {this.pagination.page_size = page_size;this.getData()}"
              @current-change="(page_size) => {this.pagination.page_start = page_size;this.getData()}"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pagination.page_size"
              :total="pagination.total_count"
              :current-page="pagination.current_page"
              :page-count="pagination.page_count"
            ></el-pagination>
          </div>
          <!-- 确认 取消 -->
          <div class="Confirm_cancel flex flexR center">
            <el-button type="primary" @click="saveClientManager">确定</el-button>
            <el-button type @click="close_Model">取消</el-button>
          </div>
        </div>
      </modelBox>
    </div>

    <div class="essential_information">
      <viewTitle :title="'公司信息'" :border="false"></viewTitle>
      <div class="basic_information">
        <div class="flex basic_information_item flexR">
          <div class="flex">
            <div class="information_item_title">企业名称:</div>
            <div class="information_item_content">{{enterprise_info.enterprise_name}}</div>
          </div>
          <div class="flex">
            <div class="information_item_title">企业编号:</div>
            <div class="information_item_content">{{enterprise_info.enterprise_sn}}</div>
          </div>
        </div>
        <div class="flex basic_information_item flexR">
          <div class="flex">
            <div class="information_item_title">法人姓名:</div>
            <div class="information_item_content">{{enterprise_info.legal_person}}</div>
          </div>
          <div class="flex">
            <div class="information_item_title">证件号码:</div>
            <div class="information_item_content">{{enterprise_info.certificate}}</div>
          </div>
        </div>
        <div class="flex basic_information_item flexR">
          <div class="flex">
            <div class="information_item_title">联系人姓名:</div>
            <div class="information_item_content">{{enterprise_info.contact_name}}</div>
          </div>
          <div class="flex">
            <div class="information_item_title">联系人手机:</div>
            <div class="information_item_content">{{enterprise_info.mobile}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="personnel_list">
      <div class="personnel_list_btn flex flexR center">
        <viewTitle :title="'人员列表'" :border="false"></viewTitle>
        <el-button type="primary" class="add_btn" @click="add_personnel">人员添加</el-button>
      </div>

      <div class="table_list">
        <el-table
          border
          :data="tableData"
          style="width: 100%;max-width:none;"
          :header-cell-style="getRowClass"
          :select-on-indeterminate="true"
          :fit="true"
          :lazy="true"
          @row-click="clickRow"
          max-height="450"
        >
          <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
          <el-table-column fixed prop="professional_sn" label="人员编号" width="100"></el-table-column>
          <el-table-column prop="name" label="姓名" width="100"></el-table-column>
          <el-table-column prop="cer_code" label="身份证" width="220"></el-table-column>
          <el-table-column prop="name" label="银行卡号" width="120"></el-table-column>
          <el-table-column prop="mobile" label="手机号码" show-overflow-tooltip width="120"></el-table-column>
          <el-table-column prop="g" label="出款金额" width="150">
            <template slot-scope="scope">
              <div>
                <el-input v-model="scope.row.money"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="h" label="业绩说明" >
            <template slot-scope="scope">
              <div>
                <el-input v-model="scope.row.remark"></el-input>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100"  >
            <template slot-scope="scope">
              <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="submit_btn flex flexR center">
        <div></div>
        <el-button type="danger" @click="submit(is_loading)">提交</el-button>
      </div>
    </div>
  </views>
</template>



<script>
export default {
  data() {
    return {
      tableData: [],
      tableDatas: [],
      select_list: [], // 选择列表
      add_customer_show: false, //  人员添加展示
      create_time: [], //  创建时间
      keywords: "", //  关键字
      created_time_start: "", // 开始时间
      created_time_end: "", // 结束时间
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      pagination: {
        //分页数据
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      },
      enterprise_info: {},
      is_loading: true
    };
  },
  computed: {
    //实时计算要传输的编辑参数
    post_data() {
      let data = {},
        time_list = this.create_time || [];
      if (time_list && time_list.length > 0) {
        data.created_time_start =time_list[0]/1000;
        data.created_time_end = time_list[1]/1000;
      }
      data.keywords = this.keywords || "";
      data.pagination = this.pagination || {};
      return data;
    }
  },
  methods: {
    //    修改第一行样式
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background: #FAFAFA ";
      } else {
        return "";
      }
    },
    //     点击单行
    clickRow(row, column, event) {
      console.log(row, column, event);
    },
    //    修改是否换行
    changeStyleRow(width) {
      let _width = width - 290 - 350 - 300 - 50 - 25;
      if (_width > 300) {
        this.marginLeft = 25;
      } else {
        this.marginLeft = 0;
      }
    },
    close_Model() {
      this.add_customer_show = false;
    },
    saveClientManager() {
      this.add_customer_show = false;
      this.tableData = this.select_list || [];
    },
    handleSelectionChange(val) {
      this.select_list = val || [];
      console.log("选择列表", this.select_list);
    },
    add_personnel() {
      this.add_customer_show = true;
    },
    handleDelete(index) {
        this.tableData.splice(index,1);
    },
    // 获取列表数据
    getData() {
      let data = this.$api.sendSync(
        this.$mapapi.e_getProfessionalList,
        this.post_data
      );
      if (data.code != 200 && data.code != 501) {
        this.$message.error(msg);
        return;
      }
      this.tableDatas = data.data.list || [];
      this.pagination = data.data.pagination || {};
      this.enterprise_info = data.data.enterprise_info || {};
    },
    query() {
      this.pagination.page_start = 1;
      this.getData();
    },
    reset() {
      this.pagination = {
        //分页数据
        page_start: 0, //搜索开始页码
        current_page: 0, //当前页码
        page_count: 0, //总页数
        page_size: 10, //每页数量
        total_count: 0 //总数量
      };
      this.create_time = []; //  创建时间
      this.keywords = ""; //  关键字
      this.created_time_start = ""; // 开始时间
      this.created_time_end = ""; // 结束时间
    },
    submit(is_loading) {
      let select_list = [],
        list = this.tableData || [],
        money_show = false,
        remark_show = false;
      console.log("is_loading", is_loading);
      if (list.length == 0) {
        this.$message.error("请选择人员");
        return;
      }
      list.forEach(element => {
        if (element.professional_id && element.money && element.remark) {
          select_list.push({
            professional_id: element.professional_id,
            money: element.money,
            remark: element.remark
          });
          money_show = true;
          remark_show = true;
        } else {
          let money_ = /^[0-9]*(\.[0-9]{1,2})?$/;
          if (element.money == "" || element.money == null) {
            money_show = false;
          } else {
            if (!money_.test(element.money)) {
              money_show = false;
            } else {
              money_show = true;
            }
          }
          if (element.remark == "" || element.remark == null) {
            remark_show = false;
          } else {
            remark_show = true;
          }
        }
      });
      if (money_show == false) {
        this.$message.error("请输入正确金额");
        return;
      }
      if (remark_show == false) {
        this.$message.error("请输入业绩说明");
        return;
      }
      this.is_loading = false;
      let data = this.$api.sendSync(this.$mapapi.e_fastIssuing, {
        issuing_data: list || []
      });
      if (data.code != 200) {
        this.is_loading = true;
        this.$message.error(data.msg);
        return;
      }
      this.$message.success(data.msg);
      this.$toRoutePath({
        path: "/enterprise_gen_verify",
        edit: true,
        query: {}
      });
    }
  },
  created() {},
  mounted() {
    this.getData();
    console.log("金额验证", /^[0-9]*(\.[0-9]{1,2})?$/.test(""));
  }
};
</script>

<style lang="less"  :scope="true"  src="@/style/issuing/fastIssuing.less" >
</style>